<template>
    <div id="container" :style="{ height: height + 'px' }"></div>
</template>

<script type="text/babel">
    import commonService from '../common/commonService';
    import {LANG, LOCAL,PRECISION} from '../util/lang';
    import filter from '../util/filter';
    import lib from '../../src/common/lib'

    export default {
        components: {

        },
        props:{
            wsSymbol:{
                default:'BTC_ETH'
            },
            height:{
                default:400
            }
        },
        data() {
            return {
                filter:filter,
                timeType:'1m',
                ohlc:[],
                volume:[],
                price:[],
                socket:null,
                subscribe:false,
                requestIndex:0,

                oChart : null
            };
        },

        created() {
            this.fetchKlineData();
            this.initGraph();
        },

        methods: {

            fetchKlineData(){
                let param = {
                    symbol:this.wsSymbol,
                    kline:this.timeType
                };
                commonService.kline(param).then((rep) => {
                    let klineData = [];
                    if(_.isArray(rep) && rep.length>0){
                        klineData = rep.reverse();
                    }

                    //获取数据后 重新绘制图像
                    let price = [];
                    let volume = [];
                    let ohlc = [];
                    let len =  klineData.length;
//                    if(len>=90){
//                        klineData = klineData.slice(0,90);
//                        len =  klineData.length;
//                    }

                    for(let i = 0;i<len;i++){
                        if(klineData[i].time === 0){
                            continue;
                        }
                        price.push([
                            klineData[i].time*1000,
                            klineData[i].close
                        ]);
                        ohlc.push([
                            klineData[i].time*1000,
                            klineData[i].open,
                            klineData[i].maxPrice,
                            klineData[i].lowPrice,
                            klineData[i].close
                        ]);
                        volume.push([
                            klineData[i].time*1000,
                            +filter.fix(klineData[i].amount, 4)
                        ]);
                    }

                    this.price = price;
                    this.ohlc = ohlc;
                    this.volume = volume;
                    this.highcharts_Rendering();


                }).fail((rep) => {

                }).always(()=> {

                });
            },


            initGraph(time){
                this.oChart&&this.oChart.showLoading();
            },




            highcharts_Rendering() {
                let that = this;
                Highcharts.setOptions({global: {useUTC: true,timezoneOffset:lib.getCurrentTimezone()*60}})

                //修改colum条的颜色（重写了源码方法）
                let originalDrawPoints = Highcharts.seriesTypes.column.prototype.drawPoints;
                Highcharts.seriesTypes.column.prototype.drawPoints = function () {
                    let series = this,
                        chart  = this.chart,
                        points = series.points,
                        i      = points.length;

                    while (i--) {
                        let candlePoint = chart.series[0].points[i];
                        if(candlePoint.open != undefined && candlePoint.close !=  undefined){  //如果是K线图 改变矩形条颜色，否则不变
                            if(candlePoint.open < candlePoint.close){
                                points[i].color = 'transparent';
                                points[i].borderColor = '#156018';
                                points[i].borderWidth = 1;
                            }else{
                                points[i].color =  '#a1311b';
                                points[i].borderColor = 'transparent';
                            }
                        }

                    }
                    originalDrawPoints.call(this);
                }

                $('#container').highcharts({
                    chart: {

                        backgroundColor: '#212121',
                        spacing: [56, 16, 8, 16]
                    },
                    title: {
                        text: null,
                        style:
                            { "color": "#ffffff"}
                    },
                    subtitle: {
//                        text: document.ontouchstart === undefined ?
//                            '鼠标拖动可以进行缩放' : '手势操作进行缩放',
                        align:'right'
                    },
                    xAxis: {
                        type: 'datetime',
                        title: {
                            style: {color: '#5b6165'}
                        },
                        lineColor:'#343535',
                        tickColor:'#343535',
                        labels: {style: {color: '#8c8c8c'}},
                        dateTimeLabelFormats: {
                            day: '%m-%d',
                            week: '%m-%d',
                            month: '%m-%d',
                            year: '%m-%d'
                        }
                    },
                    tooltip: {
                        dateTimeLabelFormats: {
                            millisecond: '%Y-%m-%d:%H:%M:%S.%L',
                            second: '%Y-%m-%d %H:%M:%S',
                            minute: '%Y-%m-%d %H:%M',
                            hour: '%H:%M',
                            day: '%Y-%m-%d',
                            week: '%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        },
                        useHTML: true,
                        formatter: function (a,b,c) {
                            let precision = that.$$coinPrecision;
                            let name = that.$t('common.comp.price');
                            if(this.series.name === that.$t('common.comp.volume')){
                                precision = that.$$amountPrecision?that.$$amountPrecision:4;
                                name = that.$t('common.comp.volume');
                            }
                            let tip = `<p style="font-size: 12px">${  Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x)}</p>
                                       <p> <span style="background-color: ${this.color};display:inline-block;padding: 4px;margin-right:4px;border-radius: 50%"></span>
                                        ${name} ${filter.floorFixPrice(this.y, precision)}</p>`
                            return tip;
                        }
                    },
                    yAxis: [
                        {
                            height: '75%',
                            title: {
                                text: that.$t('common.comp.price')+'('+that.wsSymbol.split('_')[0]+')',
                                style: {color: '#8c8c8c'}
                            },
                            labels: {
                                style: {color: '#8c8c8c'},
                                formatter: function () {
                                    return filter.floorFixPrice(this.value, that.$$coinPrecision);
                                }
                            },
                            gridLineColor:'#343535',
                            gridLineDashStyle:'ShortDash'
                        }, //价格
                        {
                            top: '75%',
                            height: '25%',
                            labels: {style: {color: '#8c8c8c'}},
                            title: {text: null, style: {color: '#4a596b'}},
                            gridLineWidth: 0,

                            opposite:true,
                            gridLineColor:'transparent',
                            plotBands: [{
                                from:-99999,
                                to:99999,
                                color: '#1a1a1a'
                            }
                            ]
                        }//成交量
                    ],
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        line:{
                            color:'#095FBA',
                            lineWidth:1,
                            states:{
                                hover:{
                                    lineWidth:1
                                }
                            },
                            marker:{
                                radius:0
                            }
                        }
                    },
                    series: [
                        {
                            name: 'ohlc',//that.$t('common.comp.price'),
                            type: 'candlestick',
                            color: 'transparent',
                            lineColor: 'transparent',
                            upColor: 'transparent',
                            upLineColor: 'transparent',
                            data: this.ohlc,
                        },
                        {
                            type: 'line',
                            name: that.$t('common.comp.price'),
                            data: that.price
                        },
                        {
                            type: 'column',
                            name: that.$t('common.comp.volume'),
                            data: that.volume,
                            yAxis: 1,
                            maxPointWidth:10
                        }
                        ]
                });

            }
        }
    }

</script>

<style lang="sass" rel="stylesheet/scss">
    $color-link: #0b95ff;





</style>